<template>
  <el-drawer
    ref="drawerBox"
    :visible.sync="drawerVisible"
    :wrapper-closable="true"
    :close-on-press-escape="false"
    :title="title"
    append-to-body
    size="80%"
  >
    <div class="drawer-content">
      <OrderSelect
        v-if="drawerVisible"
        ref="orderSelectRef"
        :step-one-data="stepOneData"
        :settle-id="settleId"
        :is-invite-order="true"
        @submitCostAndOrder="submitCostAndOrder"/>
    </div>
  </el-drawer>
</template>

<script>
import OrderSelect from '../model/orderSelect/index';
export default {
  components: { OrderSelect },
  props: {
    stepOneData: {
      type: Object,
      default: () => {
        return {};
      }
    },
    title: {
      type: String,
      default: '审批项选择'
    },
    settleId: {
      type: String | Number,
      default: ''
    }
  },
  data() {
    return {
      drawerVisible: false
    };
  },
  methods: {
    openDrawer() {
      this.drawerVisible = true;
    },
    closeOrderSelect() {
      this.drawerVisible = false;
    },
    submitCostAndOrder() {
      this.drawerVisible = false;
      this.$emit('refreshOrderList');
    }
  }
};
</script>

<style scoped lang="scss">
::v-deep .el-drawer__header {
  height: 48px;
  padding: 0 12px 0 24px;
  margin: 0;
  box-shadow: 2px 4px 5px 0 rgba(221,225,234,0.3);
  display: flex;
  align-items: center;
  > span {
    font-size: 14px;
    color: #333;
  }
  ::v-deep .el-tabs__nav-wrap::after {
    height: 0 !important;
  }
}
::v-deep .el-tabs__header {
  margin: 0;
  border: none;
}
::v-deep .el-drawer__body {
  @include scrollBar($y: auto, $width: 6px);
}
::v-deep .el-drawer__header>span{
  font-size: 16px;
}
::v-deep .el-badge__content{
  background: #FB5227;
}
::v-deep .el-badge__content{
  margin-top: 18px;
}
.tip {
  color: #999;
  font-size: 13px;
  margin-left: 20px;;
}
.drawer-content {
  padding: 24px 24px 0;
  overflow-y: auto;
  .table-list {
    &::v-deep {
     .el-table__header {
        .el-checkbox__inner {
          position: relative;
          left: -2px;
        }
      }
    }
    border-radius: 10px;
    .el-row {
      padding: 0;
    }
    .delete-button-container {
      flex:1;
      height: 32px;
      display: flex;
      align-items: center;
      .related-btn {
        margin-left: 20px;
        padding-left: 12px;
        padding-right: 12px;
      }
    }
    ::v-deep .pagination-flex {
      position: absolute;
      width: 100% !important;
    }
  }
}
::v-deep .el-tabs__nav-wrap::after {
  z-index: -1;
}
::v-deep .el-tabs__active-bar {
  bottom: 1px;
}
</style>
